<!--processed-->
<link rel="stylesheet" href="/views/worldpay/detail/tmp.css">
<section id="worldpay-detail">
    <div class="breadcrumb fx-row-s">
        <i class="back iconfont icon-fanhui1" id="back"></i>
        <span>worldpay</span>
        <span class="interval">/</span>
        <span>submit info</span>
    </div>
    <div class="feat-grid">
        <div class="row">
            <div class="left col-sm-14">
                <div class="left-head">
                    <!--模板填充-->
                    <span class="head-time"></span>
                    <span><label>Order Code：</label><span  class="head-code"></span></span>
                    <span><label>Transcation amount：</label> <span class="head-amount"></span></span>
                </div>
                <div class="left-prompt">
                    <span class="prompt-text">
                                Please supply supporting information for order: <span class="head-code"></span>
                    </span>
                    <div class="icon-box">
                        <i class="iconfont icon-shuoming"></i>
                        <div class="layer-track">
                            <div class="track-title">
                                <span style="font-size: 16px">Note</span>
                                <span class="track-close">&times;</span>
                            </div>
                            <ul class="track-content">
                                <li>You can upload a file with one of the following extensions: doc, docx, jpg, jpeg, png, gif, tiff, pdf or txt</li>
                                <li>Alternatively you can upload a zip file which can contain multiple files of the given extensions.</li>
                                <li>The maximum file size upload is 4MB.</li>
                                <li>Please submit all support documentation in a single submission, as additional submissions may not be reviewed.</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!--证据上传说明-->

                <section class="left-up-box">
                    <h4 class="mt20">Attachment File:</h4>
                    <div class="row">
                        <div class="col-sm-12">
                            <p class="box-title">Order information</p>
                            <div class="box-img">
                                <div id="orderCheck" class="img-box">
                                    <div class="box-list" data-src="">
                                        <img src="" alt="">
                                        <div class="layer-check fx-row-a">
                                            <i class="iconfont icon-fangda"></i>
                                            <i class="iconfont icon-shanchu"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="img-operation fx-col-c">
                                    <div class="op-icon">
                                        <label>
                                            <i class="iconfont icon-shangchuan"></i>
                                            <input multiple data-relation="orderCheck" type="file" class="up-class hide">
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-12">
                            <p class="box-title">Return Policy</p>
                            <div class="box-img">
                                <div id="policyCheck" class="img-box">
                                    <div class="box-list" data-src="https://www.allindesk.com/img/Return%20Policy.png">
                                        <img src="https://www.allindesk.com/img/Return%20Policy.png" alt="">
                                        <div class="layer-check fx-row-a">
                                            <i class="iconfont icon-fangda"></i>
                                            <i class="iconfont icon-shanchu"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="img-operation fx-col-c">
                                    <div class="op-icon">
                                        <label>
                                            <i class="iconfont icon-shangchuan"></i>
                                            <input multiple data-relation="policyCheck" type="file" class="up-class hide">
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-24">
                            <p class="box-title">Tracking Information</p>
                            <div class="box-img">
                                <div id="trackingCheck" class="img-box">
                                    <!--图片列表 tracking-->
                                </div>
                                <div class="img-operation fx-col-c">
                                    <div class="op-icon">
                                        <label>
                                            <i class="iconfont icon-shangchuan"></i>
                                            <input multiple data-relation="trackingCheck" type="file" class="up-class hide">
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-24">
                            <p class="box-title">Shipping document</p>
                            <div class="box-img">
                                <div id="receiptCheck" class="img-box">
                                    <!--图片列表 receipt-->
                                </div>
                                <div class="img-operation fx-col-c">
                                    <div class="op-icon">
                                        <label>
                                            <i class="iconfont icon-shangchuan"></i>
                                            <input multiple data-relation="receiptCheck" type="file" class="up-class hide">
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </section>

                <!--<div class="left-title mt20">
                    <h4 data-name="reason">Attachment File:</h4>
                </div>-->
                <div class="left-content mt30">

                </div>

                <div class="left-message">
                    <div class="fx-row-s">
                        <h4>Additional Supporting Comments:</h4>
                        <select class="select-c1 ml10" name="" id="selectTemplate">
                            <!--select模板-->
                        </select>
                    </div>
                    <textarea name="" id="sendInfoMsg" placeholder="Send a friendly message to the buyer"></textarea>

                    <div class="row mt10">
                        <div class="col-sm-24 tr">
                            <button type="button" class="btn-b" id="clearTmp">
                                clear
                            </button>
                            <button type="button" class="btn-a" id="sendInfo">
                                <i class="send-animate"><span class="send-main"></span></i>
                                <span class="send-text">submit info</span>
                            </button>
                        </div>
                    </div>
                </div>

            </div>
            <div class="right col-sm-10">
                <!--模板填充-->
                <div class="right-info">
                    <div class="line">
                        <h3>Network station</h3>
                        <p data-name="station"></p>
                    </div>
                    <div class="line">
                        <h3>Customer Contact</h3>
                        <p data-name="buyer"></p>
                    </div>
                    <div class="line">
                        <h3>Shipping Address</h3>
                        <p data-name="shippingAddress"></p>
                    </div>
                    <div class="line">
                        <h3>Transaction ID:</h3>
                        <p data-name="transactionId"></p>
                    </div>
                    <div class="line">
                        <h3>Order No:</h3>
                        <p data-name="orderSn"></p>
                    </div>
                </div>
                <!--erp信息-->
                <div class="right-erp">
                    <div class="row">
                        <div class="col-sm-12"><h4>Logistics Information:</h4></div>
                        <div class="col-sm-12"><button id="stopOrder" class="btn-b hide">终止订单</button></div>
                    </div>
                    <div class="erp-box">

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!--渲染模板开始-->

<!--erp订单列表模板-->
<script type="text/html" id="resolution-detail-erp">
    <div class="erp-order row mt10">
        <div class="col-sm-12"><label>订单号：</label><span>{{OrderNo}}</span></div>
        <div class="col-sm-12"><label>状态：</label><span>{{ERPStatus}}</span></div>
    </div>
    <ul class="erp-content">
        {{each OrderGoods as v i}}
        {{set isTrue = v.PackageStatus == '已发货' ? true : false}}
        <li class="content-list">
            <div class="text-line">
                {{if(isTrue)}}
                <i class="iconfont icon-yifahuo"></i>
                {{/if}}
                <strong><i class="line-status" style="color:{{isTrue ? '' : '#999'}}">{{v.PackageStatus}}</i></strong>
            </div>
            <div class="text-line row">
                <div class="col-sm-12"><label>sku：</label><span>{{v.SkuId}}</span></div>
                <div class="col-sm-12"><label>Description：</label><span>{{v.Specification}}</span></div>
            </div>
            <div class="text-line row">
                <div class="col-sm-12"><label>Tracking number：</label><span>{{v.ExpressNo}}</span></div>
                <div class="col-sm-12"><label>Package number：</label><span>{{v.PackageNo}}</span></div>
            </div>
        </li>
        {{/each}}
    </ul>
</script>

<!--图片预览模板-->
<script id="img-preview" type="text/html">
    <div class="media">
        <embed class="preview hide" src="" type="">
        <img class="preview hide" src="" alt="">
    </div>
</script>

<!--图片渲染模板-->
<script id="worldpay-img-list" type="text/html">
    {{each data as v i}}
    {{set isTrue = /\.pdf/g.test(v)}}
    <div class="box-list" data-src="{{v}}">
        <img src="{{isTrue ? '/src/img/pdf.png' : v}}" alt="">
        <div class="layer-check fx-row-a">
            <i class="iconfont icon-fangda"></i>
            <i class="iconfont icon-shanchu"></i>
        </div>
    </div>
    {{/each}}
</script>

<script type="text/javascript" src="/src/lib/jquery.validate.min.js"></script>
<!-- js -->
<script>

    $.extend(window.p,{
        src : [],
        //保存当前case信息
        sendInfo:{},
        //订单数据
        orderArr:[],
        //sku列表
        skuID:[],
        imgFile:[],
        orderCheck:[],
        policyCheck:[],
        trackingCheck:[],
        receiptCheck:[]
    });

    $(function(){

        init();

        function init(){

            //初始请求
            p.urlPara && requestDetail(p.urlPara);
            //返回
            $(".back").click(function(){
                window.history.go(-1);
            });

            var leftUpBoxObj = $(".left-up-box");
            leftUpBoxObj.on('click',".icon-fangda",function(){
                var src = $(this).closest('.box-list').attr('data-src');
                //var labelType = $(this)[0].nodeName;
                var isTrue = /\.pdf/g.test(src);
                var type = isTrue ? 'pdf' : 'IMG';
                alertLayer(src,type)
            });
            leftUpBoxObj.on('click',".icon-shanchu",function(){
                var self = $(this);
                $.alert({
                    message:'Delete',
                    detail:'Confirm to delete this picture, it will not be displayed after deletion!',
                    singleButton:false,
                    okHandler:function(){
                        delLayerImg(self);
                    },
                    okText:'Sure',
                    cancelText:'cancel'
                })
            });

            $("#sendInfo").on('click',function(e){
                e.stopPropagation();
                var that = $(this);
                var content = $("#sendInfoMsg").val();
                if(content.length>2000){
                    $.comMessage({
                        type:'prompt',
                        text:'文字数量需小于2000！',
                    })
                    return;
                }
                if(content.length<1){
                    $.comMessage({
                        type:'prompt',
                        text:'请填写回复内容！',
                    })
                    return;
                }
                $.alert({
                    message:'Confirm',
                    detail:'Confirm whether to submit information?',
                    singleButton:false,
                    okHandler:function(){
                        subMes(that);
                    },
                    okText:'Sure',
                    cancelText:'cancel'
                });

            });

            //清除模板选择内容
            $("#clearTmp").on('click',function(){
                $("#sendInfoMsg").val('');
                $("#selectTemplate").val('')
            });

            //说明事件
            $('.icon-shuoming').on('click',function(){
                $(".layer-track").fadeIn();
            })
            $(".icon-box").on('click','.track-close',function(){
                $(".layer-track").fadeOut();
            })

            $("#selectTemplate").on('change',function(){
                var val = $(this).val();
                var textareaObj = $("#sendInfoMsg");
                var oldVal = textareaObj.val();
                textareaObj.val(oldVal +"\n"+ val);
            })

        }

        //提交证据信息
        function subMes(that){
            app.ajax({
                type:'post',
                url:app.api('/api/wp/uploadEvidence'),
                data:{
                    merchantCode:p.sendInfo.merchantCode,
                    orderCode:p.sendInfo.orderCode,
                    lastEvent:p.sendInfo.lastEvent,
                    email_cs_admin_id:para.user.email_cs_admin_id,
                    msg:$("#sendInfoMsg").val(),
                    //evidence:p.orderCheck.concat(p.policyCheck,p.trackingCheck,p.receiptCheck),

                    order_info_img:p.orderCheck[0],
                    return_policy:p.policyCheck[0],
                    trackinginfomation:p.trackingCheck,
                    erp_face_sheet:p.receiptCheck
                },
                beforeSend:function(){
                    that.addClass('active-animate');
                    that.prop("disabled",true);
                },
                success:function(res){
                    if(res.code == 0){
                        $("#clearTmp").trigger('click');
                        $.comMessage({
                            type:'prompt',
                            text:'提交成功！',
                            callback:function(){
                                $("#back").trigger('click');
                            }
                        });
                    }else{
                        $.comMessage({
                            type:'prompt',
                            text:res.msg
                        })
                    }
                },
                complete:function(){
                    that.removeClass('active-animate');
                    that.prop("disabled",false);
                }
            });
        }

        //弹出层
        function alertLayer(url,labelType){
            var dom = $("#img-preview").html();
            p.layerObj = new ComLayer({
                title:'Evidence preview',
                dom:dom,
                width:'85%',
                okHandler:function(){
                    p.layerObj.close();
                },
                callback:function(){
                    $(".preview").attr('src',url);
                    if(labelType == 'IMG'){
                        $("img.preview").removeClass('hide');
                    }else{
                        $("embed.preview").removeClass('hide');
                    }
                },
            })
        }
        //删除当前照片
        function delLayerImg(that){
            var url = that.closest('.box-list').attr('data-src');
            var id = that.closest('.img-box').prop('id');
            var arr = p[id].filter(function(item,index){
                return item != url;
            });
            p[id] = arr;
            that.closest('.box-list').remove();
        }


        //请求详情
        function requestDetail(para){
            var loadObj = null;
            app.ajax({
                type:'GET',
                url:app.api('/api/getCaseInfo/') + para,
                beforeSend:function(){
                    loadObj = $.load({
                        insert:$(".left-up-box"),
                    });
                },
                success:function(res){
                    console.log(res)
                    if(res.code == 0){
                        p.sendInfo = res.data;
                        renderDetail(res);
                        //订单相关
                        renderRightInfo(res.data.orderInfo);
                        //渲染图片
                        renderImg(res);
                    }
                },
                complete:function(){
                    loadObj.close()
                }
            })
        }

        //渲染详情
        function renderDetail(res){
            var data = res.data;
            $(".head-time").html(data.booking_date);
            $(".head-code").html(data.orderCode);
            $(".head-amount").html(data.amount);
        }

        function renderRightInfo(erp){
            //订单物流
            var dom = template('resolution-detail-erp',erp);
            $(".erp-box").html(dom);

            if(!erp){
                $(".erp-box").html("<p class='mt10'>Temporarily no data please manually query！</p>");
                return;
            }
            var str2 = erp && (erp.Consignee + "<br/>");
            var str3 = erp && (erp.Email + "<br/>");
            $("[data-name='buyer']").html(str2 + str3);
            $("[data-name='shippingAddress']").html(erp && erp.Address);
            $("[data-name='transactionId']").html(erp && erp.Tx);
            $("[data-name='orderSn']").html(erp && erp.OrderNo);
            $("[data-name='station']").html(erp && erp.SiteName);
            //p.sendInfo.order_sn = (erp && erp.OrderNo);
        }

        //渲染图片
        function renderImg(res){
            p.imgFile = res.data.attachment_file;

            var orderObj = $("#orderCheck");
            var policyObj = $("#policyCheck");
            if(p.imgFile.erp_order_detail_screen_shot_img){
                p.orderCheck.push(p.imgFile.erp_order_detail_screen_shot_img);
                orderObj.find('img').prop('src',p.imgFile.erp_order_detail_screen_shot_img);
                orderObj.find('.box-list').attr('data-src',p.imgFile.erp_order_detail_screen_shot_img);
            }
            if(p.imgFile.return_policy_img){
                p.policyCheck.push(p.imgFile.return_policy_img);
                policyObj.find('img').prop('src',p.imgFile.return_policy_img);
                policyObj.find('.box-list').attr('data-src',p.imgFile.return_policy_img);
            }

            //渲染物流
            if(p.imgFile.tracking_information && p.imgFile.tracking_information.length>=1){
                var dom = template('worldpay-img-list',renderImgList(p.imgFile.tracking_information));
                $("#trackingCheck").html(dom);
                $.each(p.imgFile.tracking_information,function(index,item){
                    p. trackingCheck.push(item);
                })
            }

            if(p.imgFile.erp_face_sheet && p.imgFile.erp_face_sheet.length>=1){
                var dom = template('worldpay-img-list',renderImgList(p.imgFile.erp_face_sheet));
                $("#receiptCheck").html(dom);
                $.each(p.imgFile.erp_face_sheet,function(index,item){
                    p.receiptCheck.push(item);
                })
            }

        }

        //获取回复模板
        function getTemplate(){
            app.ajax({
                type:'GET',
                url:app.api('/api/wp/getTmp'),
                beforeSend:function(){},
                success:function(res){
                    if(res.code == 0){
                        console.log(res)
                        var str = '<option value="">select template</option>';
                        $.each(res.data,function(index,item){
                            str+= '<option value="'+item.tmp_content+'">'+item.tmp_name+'</option>';
                        })
                        $("#selectTemplate").html(str);
                    }
                },
                complete:function(){
                }
            })
        }
        getTemplate();


    });


    //更改图片数据结构
    function renderImgList(arr){
        var res = {
            data:arr
        };
        return res;
    }

    //上传对象
    var up = {
        initEvent:function(){
            var _this = this;
            $('.up-class').on('change',function(){
                var that = $(this);
                var mes = _this.readFileRule(that);
                if(!mes){
                    _this.upLoadImg(that);
                }else{
                    if(mes == 'type'){
                        $.comMessage({
                            type:'warning',
                            text:'文件类型错误'
                        });
                    }
                }
            });
        },

        //校验格式
        readFileRule: function(file,size,num){
            var fileDom = file[0].files;
            var mes = '';
            for(var i = 0;i<fileDom.length;i++){
                if(size && (fileDom[i].size/1000)>size){
                    mes = 'size';
                    break;
                }else if(!/(jpeg)|(png)|(jpg)|(pdf)$/.test(fileDom[i].type)){
                    mes = 'type';
                    break;
                }
            }
            if(num && fileDom.length+p.arrFile.length > num){
                mes = 'length'
            }
            return mes;
        },

        upLoadImg:function(input){
            var _this = this;
            var fd = new FormData();
            input.each(function(index,item){
                $.each(item.files,function(indexChild,itemChild){
                    fd.append('picture[]',itemChild)
                })
            });
            //fd.append('type','paypal_disputes');
            //fd.append('item_id',p.sendInfo.dispute_id);
            $.ajax({
                type : 'post',
                url : app.api('/api/storage/oss/upload/' + para.token),
                data : fd,
                cache : false,
                processData : false,
                contentType : false,
                success : function(res){
                    if(res.code == 0){
                        _this.saveImgUrl(res,input)
                    }
                },
                error : function(){
                    console.log('err')
                }
            })
        },

        saveImgUrl:function(res,input){
            var tmp = template('worldpay-img-list',renderImgList(res.data.file_urls));
            var name = input.attr('data-relation');
            $.each(res.data.file_urls,function(index,item){
                p[name].push(item);
            });
            $("#"+name).append(tmp);
            input.val('')
        },

    };
    up.initEvent();
</script>